small fix to set API section as default for explorer code snippets #7980
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
WalkthroughInitial code environment for the ContractFunctionInner component is changed from "javascript" to "api". The initial state now selects the API snippet variant on first render. Snippet assembly logic, environment toggling, and data fetching remain unchanged. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ContractFunctionInner as ContractFunctionInner (React)
participant CodeSegment as CodeSegment
User->>ContractFunctionInner: Mount component
activate ContractFunctionInner
ContractFunctionInner->>ContractFunctionInner: init state: environment = "api"
ContractFunctionInner->>CodeSegment: Render with environment = "api"
deactivate ContractFunctionInner
User-->>CodeSegment: Toggle environment (optional)
CodeSegment-->>User: Display selected snippet
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx (3)
6-11: AdduseEffectimport for fallback handling (see next comment).If you adopt the fallback effect below, include
useEffecthere.import { type Dispatch, lazy, type SetStateAction, useMemo, - useState, + useState, + useEffect, } from "react";
151-156: Graceful fallback when API snippet is unavailable.With
"api"as the initial environment, functions lacking an API snippet could render an empty panel unlessCodeSegmentguards this. Add a minimal fallback to switch to the first available snippet.const codeSnippet = { ...baseSnippet, ...apiSnippet, ...curlSnippet, }; + + // Fallback: if selected environment isn't available for this function, pick the first available + useEffect(() => { + const available = Object.keys(codeSnippet) as CodeEnvironment[]; + if (!available.includes(environment)) { + const preference: CodeEnvironment[] = [ + "api", + "javascript", + "typescript", + "react", + "react-native", + "dotnet", + "unity", + "curl", + ]; + const next = + preference.find((e) => available.includes(e)) ?? available[0]; + if (next) setEnvironment(next); + } + }, [environment, codeSnippet]);
224-224: Fix stray brace in list key.Minor typo in key string.
- <TableRow key={`${input.name}+${idx}}`}> + <TableRow key={`${input.name}-${idx}`}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx (1)
apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx (1)
CodeEnvironment(9-17)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
apps/dashboard/src/@/components/contracts/functions/contract-function.tsx (3)
71-71: Default to API by default — LGTM.This directly satisfies the PR goal;
CodeEnvironmentalready includes"api".
69-76: Confirm desired persistence across function switches.
environmentstate is preserved when selecting different functions (same component instance). If product wants “API by default per function,” reset onfnchange; otherwise keep as-is.Option to reset per function:
- const [environment, setEnvironment] = useState<CodeEnvironment>("api"); + const [environment, setEnvironment] = useState<CodeEnvironment>("api"); + useEffect(() => { + setEnvironment("api"); + }, [fn]);
187-193: CodeSegment handles missing env keys correctly; no changes required.
It gracefully falls back to the first available snippet (viaObject.keys(snippet)[0]) when the requested environment key is missing and renders without error.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #7980 +/- ##
=======================================
Coverage 56.53% 56.53%
=======================================
Files 904 904
Lines 58626 58626
Branches 4146 4146
=======================================
Hits 33145 33145
Misses 25375 25375
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
PR-Codex overview
This PR updates the
ContractFunctionInnercomponent by changing the initial state value ofenvironmentfrom"javascript"to"api".Detailed summary
environmentinContractFunctionInnerfrom"javascript"to"api".Summary by CodeRabbit